<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>图表统计</title>
		<link rel="stylesheet" href="../assets/lib/bootstrap.css" />
		<link rel="stylesheet" href="../assets/lib/main.css" />
		<script src="../assets/lib/jquery.js"></script>
		<script type="text/javascript" src="../assets/lib/echarts.min.js"></script>
	</head>

	<body>
		<div class="container-fluid">
			<div class="row spannel_list">
				<div class="col-sm-3 col-xs-6">
					<div class="spannel">
						<em>100015</em><span>人</span>
						<b>总用户数</b>
					</div>
				</div>
				<div class="col-sm-3 col-xs-6">
					<div class="spannel scolor01">
						<em>3123</em><span>人</span>
						<b>日新增用户数</b>
					</div>
				</div>
				<div class="col-sm-3 col-xs-6">
					<div class="spannel scolor02">
						<em>52223</em><span>条</span>
						<b>评论总数</b>
					</div>
				</div>
				<div class="col-sm-3 col-xs-6">
					<div class="spannel scolor03">
						<em>123</em><span>条</span>
						<b>日新增评论数</b>
					</div>
				</div>
			</div>
		</div>

		<div class="container-fluid">
			<div class="row curve-pie">
				<div class="col-lg-8 col-md-8">
					<div class="gragh_pannel" id="curve_show"></div>
				</div>
				<div class="col-lg-4 col-md-4">
					<div class="gragh_pannel" id="pie_show"></div>
				</div>
			</div>
		</div>

		<div class="container-fluid">
			<div class="column_pannel" id="column_show"></div>
		</div>

		<script>
			var oChart = echarts.init(document.getElementById('curve_show'));
			var aList_all = [
				{
					count: 36,
					date: '2021-04-13',
				},
				{
					count: 52,
					date: '2021-04-14',
				},
				{
					count: 78,
					date: '2021-04-15',
				},
				{
					count: 85,
					date: '2021-04-16',
				},
				{
					count: 65,
					date: '2021-04-17',
				},
				{
					count: 72,
					date: '2021-04-18',
				},
				{
					count: 88,
					date: '2021-04-19',
				},
				{
					count: 64,
					date: '2021-04-20',
				},
				{
					count: 72,
					date: '2021-04-21',
				},
				{
					count: 90,
					date: '2021-04-22',
				},
				{
					count: 96,
					date: '2021-04-23',
				},
				{
					count: 100,
					date: '2021-04-24',
				},
				{
					count: 102,
					date: '2021-04-25',
				},
				{
					count: 110,
					date: '2021-04-26',
				},
				{
					count: 123,
					date: '2021-04-27',
				},
				{
					count: 100,
					date: '2021-04-28',
				},
				{
					count: 132,
					date: '2021-04-29',
				},
				{
					count: 146,
					date: '2021-04-30',
				},
				{
					count: 200,
					date: '2021-05-01',
				},
				{
					count: 180,
					date: '2021-05-02',
				},
				{
					count: 163,
					date: '2021-05-03',
				},
				{
					count: 110,
					date: '2021-05-04',
				},
				{
					count: 80,
					date: '2021-05-05',
				},
				{
					count: 82,
					date: '2021-05-06',
				},
				{
					count: 70,
					date: '2021-05-07',
				},
				{
					count: 65,
					date: '2021-05-08',
				},
				{
					count: 54,
					date: '2021-05-09',
				},
				{
					count: 40,
					date: '2021-05-10',
				},
				{
					count: 45,
					date: '2021-05-11',
				},
				{
					count: 38,
					date: '2021-05-12',
				},
			];

			let aCount = [];
			let aDate = [];

			for (var i = 0; i < aList_all.length; i++) {
				aCount.push(aList_all[i].count);
				aDate.push(aList_all[i].date);
			}

			var chartopt = {
				title: {
					text: '月新增用户数',
					left: 'center',
					top: '10',
				},
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					data: ['新增用户'],
					top: '40',
				},
				toolbox: {
					show: true,
					feature: {
						mark: {
							show: true,
						},
						dataView: {
							show: true,
							readOnly: false,
						},
						magicType: {
							show: true,
							type: ['line', 'bar'],
						},
						restore: {
							show: true,
						},
						saveAsImage: {
							show: true,
						},
					},
				},
				calculable: true,
				xAxis: [
					{
						name: '日',
						type: 'category',
						boundaryGap: false,
						data: aDate,
					},
				],
				yAxis: [
					{
						name: '月新增用户数',
						type: 'value',
					},
				],
				series: [
					{
						name: '新增用户',
						type: 'line',
						smooth: true,
						itemStyle: {
							normal: {
								areaStyle: {
									type: 'default',
								},
								color: '#f80',
							},
							lineStyle: {
								color: '#f80',
							},
						},
						data: aCount,
					},
				],
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: 'rgba(255,136,0,0.39)',
							},
							{
								offset: 0.34,
								color: 'rgba(255,180,0,0.25)',
							},
							{
								offset: 1,
								color: 'rgba(255,222,0,0.00)',
							},
						]),
					},
				},
				grid: {
					show: true,
					x: 50,
					x2: 50,
					y: 80,
					height: 220,
				},
			};

			oChart.setOption(chartopt);

			var oPie = echarts.init(document.getElementById('pie_show'));
			var oPieopt = {
				title: {
					top: 10,
					text: '用户数量占比',
					x: 'center',
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)',
				},
				color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565'],
				legend: {
					x: 'center',
					top: 65,
					data: ['白领', '蓝领', '富一代', '富二代'],
				},
				toolbox: {
					show: true,
					x: 'center',
					top: 35,
					feature: {
						mark: {
							show: true,
						},
						dataView: {
							show: true,
							readOnly: false,
						},
						magicType: {
							show: true,
							type: ['pie', 'funnel'],
							option: {
								funnel: {
									x: '25%',
									width: '50%',
									funnelAlign: 'left',
									max: 1548,
								},
							},
						},
						restore: {
							show: true,
						},
						saveAsImage: {
							show: true,
						},
					},
				},
				calculable: true,
				series: [
					{
						name: '访问来源',
						type: 'pie',
						radius: ['45%', '60%'],
						center: ['50%', '65%'],
						data: [
							{
								value: 300,
								name: '白领',
							},
							{
								value: 100,
								name: '蓝领',
							},
							{
								value: 260,
								name: '富一代',
							},
							{
								value: 180,
								name: '富二代',
							},
						],
					},
				],
			};
			oPie.setOption(oPieopt);

			var oColumn = this.echarts.init(document.getElementById('column_show'));
			var oColumnopt = {
				title: {
					text: '用户访问量',
					left: 'center',
					top: '10',
				},
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					data: ['白领', '蓝领', '富一代', '富二代'],
					top: '40',
				},
				toolbox: {
					show: true,
					feature: {
						mark: {
							show: true,
						},
						dataView: {
							show: true,
							readOnly: false,
						},
						magicType: {
							show: true,
							type: ['line', 'bar'],
						},
						restore: {
							show: true,
						},
						saveAsImage: {
							show: true,
						},
					},
				},
				calculable: true,
				xAxis: [
					{
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月'],
					},
				],
				yAxis: [
					{
						name: '访问量',
						type: 'value',
					},
				],
				series: [
					{
						name: '白领',
						type: 'bar',
						barWidth: 20,
						itemStyle: {
							normal: {
								areaStyle: {
									type: 'default',
								},
								color: '#fd956a',
							},
						},
						data: [800, 708, 920, 1090, 1200],
					},
					{
						name: '蓝领',
						type: 'bar',
						barWidth: 20,
						itemStyle: {
							normal: {
								areaStyle: {
									type: 'default',
								},
								color: '#2bb6db',
							},
						},
						data: [400, 468, 520, 690, 800],
					},
					{
						name: '富一代',
						type: 'bar',
						barWidth: 20,
						itemStyle: {
							normal: {
								areaStyle: {
									type: 'default',
								},
								color: '#13cfd5',
							},
						},
						data: [500, 668, 520, 790, 900],
					},
					{
						name: '富二代',
						type: 'bar',
						barWidth: 20,
						itemStyle: {
							normal: {
								areaStyle: {
									type: 'default',
								},
								color: '#00ce68',
							},
						},
						data: [600, 508, 720, 890, 1000],
					},
				],
				grid: {
					show: true,
					x: 50,
					x2: 30,
					y: 80,
					height: 260,
				},
				dataZoom: [
					//给x轴设置滚动条
					{
						start: 0, //默认为0
						end: 100 - 1000 / 31, //默认为100
						type: 'slider',
						show: true,
						xAxisIndex: [0],
						handleSize: 0, //滑动条的 左右2个滑动条的大小
						height: 8, //组件高度
						left: 45, //左边的距离
						right: 50, //右边的距离
						bottom: 26, //右边的距离
						handleColor: '#ddd', //h滑动图标的颜色
						handleStyle: {
							borderColor: '#cacaca',
							borderWidth: '1',
							shadowBlur: 2,
							background: '#ddd',
							shadowColor: '#ddd',
						},
					},
				],
			};
			oColumn.setOption(oColumnopt);
		</script>
	</body>
</html>
